//-------------------------获取id然后回填数据修改文章-------------------------
var id = new URLSearchParams(location.search).get('id')
console.log(id); //获取成功

let form = layui.form







//--------------- 获取所有的分类  渲染到下拉框的位置-------------------

$.ajax({
    url: '/my/category/list',
    success: function(res) {
        // console.log(res);
        let str = []
        res.data.forEach(item => {
            str.push(` <option value="${item.id}">${item.name}</option>`)
        });
        $('#add_select').append(str.join(''))

        form.render('select', 'the_select')


        //-------------------------获取一篇文章 然后进行数据回填-------------------
        //   有问题????  报错
        $.ajax({
            url: '/my/article/' + id,
            success: function(res) {
                // console.log(res);
                form.val('edit', res.data)


                // 图片在单独回填
                image.cropper('destroy').attr('src', baseUrl + '/' + res.data.cover_img).cropper(option)
            }
        })


    }
})

// // ----------------把textarea换成在线文本编辑器-----------------
// initEditor() //tinymce_setup.js内置的方法

// 把文章内容回填到textarea中 然后把textarea转换成在线文本编辑器
initEditor()

//-----------------实现基础的剪裁效果----------------
//  初始化图片裁剪器
let image = $('#image')
    //--------------裁剪选项-------------
let options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
}

// 1.3 初始化裁剪区域
image.cropper(options);



//---------------点击上传按钮上传图片--------------
$('#post_img').on('click', function() {
    $('input[name="cover_img"]').trigger('click')
})

//---------------file文件域 change事件 切换图片-----------
$('input[name="cover_img"]').on('change', function() {
    let files = this.files //dom对象!!!!!!!!!别他妈再忘了!!!!!
        // console.dir(files);
    if (files.length > 0) { //意思是选择了文件
        let url = URL.createObjectURL(files[0])
            // 更换裁剪区的图片
        image.cropper('destroy').attr('src', url).cropper(options)
    }
})

//--------------获取表单数据并提交-----------
$('form').on('submit', function(e) {
    e.preventDefault()
    let formData = new FormData(this)


    // 上传的结果content没有获取到值 需要tinymce的内置方法
    formData.set('content', tinyMCE.activeEditor.getContent());

    //裁剪图片
    let canvas = image.cropper('getCroppedCanvas', { width: 400, height: 280 })
        // canvas.toDataURL()//这个是把图片转换成base64的形式 这个文档并不需要

    canvas.toBlob(blob => { //把图片转换成blob对象(二进制大对象),把他追加到formdata中会自动转换成文件对象
        formData.append('cover_img', blob)
        formData.append('id', Number(id))

        //检查结果
        // formData.forEach(function(value, key) {
        //     console.log(key, value);
        // })

    })

    $.ajax({
        type: "POST",
        url: '/my/article/update',
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) {
            console.log(res);
            location.href = '../../list/list.html'
        }
    })

})